<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
    <style>
        .card-hotel {
            border-top: 4px solid #0d6efd;
            transition: all 0.3s ease;
        }
        .card-hotel:hover {
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
        }
        .form-control:invalid {
            border-color: #dc3545;
        }
        .error-tip {
            display: none;
            font-size: 0.875em;
            color: #dc3545;
        }
        .btn-login {
            margin-right: 0.5rem;
        }
        .btn-login:last-child {
            margin-right: 0;
        }
        .btn-logged-in {
            background-color: #28a745;
            border-color: #28a745;
            color: white;
        }
        #submitErrorTip {
            display: none;
            color: #dc3545;
            font-size: 0.875em;
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <div class="card shadow-lg">
            <div class="card-header bg-primary text-white">
                <h3 class="mb-0">酒店智能比价</h3>
            </div>
            <div class="card-body">
                <form id="searchForm" class="needs-validation" novalidate method="post" action="{{ url_for('search') }}">
                    <div class="row mb-3">
                        <div class="col">
                            <label class="form-label">目的地</label>
                            <input type="text" id="destination" name="destination" class="form-control" 
                                   placeholder="输入城市或酒店名称" required>
                            <div class="error-tip">请输入城市</div>
                        </div>
                        <div class="col">
                            <label class="form-label">详细目的地</label>
                            <input type="text" id="detail_destination" name="detail_destination" class="form-control" 
                                   placeholder="请输入具体目的地" required>
                            <div class="error-tip">请输入详细目的地</div>
                        </div>
                    </div>
                    
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label">入住日期</label>
                            <input type="date" id="checkIn" name="check_in" class="form-control" 
                                   min="{{ today }}" required>
                            <div class="error-tip">请选择有效日期</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">离店日期</label>
                            <input type="date" id="checkOut" name="check_out" class="form-control" 
                                   min="{{ today }}" required>
                            <div class="error-tip">离店日期需晚于入住日期</div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between mb-3">
                        <div class="btn-group w-100">
                            <button type="button" class="btn btn-secondary btn-login" id="loginCtripBtn">
                                <i class="bi bi-box-arrow-in-right me-2"></i>登录携程
                            </button>
                            <button type="button" class="btn btn-secondary btn-login" id="loginFiggyBtn">
                                <i class="bi bi-box-arrow-in-right me-2"></i>登录飞猪
                            </button>
                            <button type="button" class="btn btn-secondary btn-login" id="loginTongchengBtn">
                                <i class="bi bi-box-arrow-in-right me-2"></i>登录同程
                            </button>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary w-100" disabled>
                        <i class="bi bi-search me-2"></i>立即比价
                    </button>
                    <div class="error-tip mt-2" id="submitErrorTip">请先登录所有平台</div>
                </form>
            </div>
        </div>

        <div class="row mt-4 g-3" id="results">
        </div>
    </div>

    <!-- 登录模态框 -->
    <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="loginModalLabel">登录平台</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>请先登录以获取最新的酒店价格信息。</p>
                    <a href="https://passport.ctrip.com/user/login" target="_blank" class="btn btn-primary" id="loginLink">登录</a>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="loginSuccessBtn">已登录</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 等待画面 -->
    <div id="loading" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <p>正在爬取数据，请稍候...</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        const today = new Date().toISOString().split('T')[0];
        document.querySelectorAll('input[type="date"]').forEach(input => {
            input.min = today;
        });

        const form = document.getElementById('searchForm');
        const submitBtn = form.querySelector('button[type="submit"]');
        const submitErrorTip = document.getElementById('submitErrorTip');
        let isCtripLoggedIn = false;
        let isQunarLoggedIn = false;
        let isTongchengLoggedIn = false;

        function validateForm() {
            const destination = document.getElementById('destination').value;
            const checkIn = document.getElementById('checkIn').value;
            const checkOut = document.getElementById('checkOut').value;
            const isValidDate = checkIn && checkOut && checkOut > checkIn;
            
            const isLoggedIn = isCtripLoggedIn && isQunarLoggedIn && isTongchengLoggedIn;
            submitBtn.disabled = !(destination.trim() && isValidDate && isLoggedIn);
            submitErrorTip.style.display = submitBtn.disabled ? 'block' : 'none';
        }

        document.getElementById('checkIn').addEventListener('change', function() {
            document.getElementById('checkOut').min = this.value;
            validateForm();
        });

        document.getElementById('checkOut').addEventListener('change', validateForm);

        form.querySelectorAll('input').forEach(input => {
            input.addEventListener('input', function() {
                this.classList.remove('is-invalid');
                this.nextElementSibling.style.display = 'none';
                validateForm();
            });
        });

        document.getElementById('loginCtripBtn').addEventListener('click', function() {
            document.getElementById('loginLink').href = 'https://www.ctrip.com/';
            const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
            loginModal.show();
            document.getElementById('loginSuccessBtn').onclick = function() {
                const loginModal = bootstrap.Modal.getInstance(document.getElementById('loginModal'));
                loginModal.hide();
                isCtripLoggedIn = true;
                document.getElementById('loginCtripBtn').classList.add('btn-logged-in');
                document.getElementById('loginCtripBtn').innerHTML = '<i class="bi bi-check-circle me-2"></i>已登录';
                validateForm();
            };
        });

        document.getElementById('loginFiggyBtn').addEventListener('click', function() {
            document.getElementById('loginLink').href = 'https://hotel.fliggy.com/hotel_list3.htm';
            const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
            loginModal.show();
            document.getElementById('loginSuccessBtn').onclick = function() {
                const loginModal = bootstrap.Modal.getInstance(document.getElementById('loginModal'));
                loginModal.hide();
                isQunarLoggedIn = true;
                document.getElementById('loginFiggyBtn').classList.add('btn-logged-in');
                document.getElementById('loginFiggyBtn').innerHTML = '<i class="bi bi-check-circle me-2"></i>已登录';
                validateForm();
            };
        });

        document.getElementById('loginTongchengBtn').addEventListener('click', function() {
            document.getElementById('loginLink').href = '  https://www.ly.com/ ';
            const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
            loginModal.show();
            document.getElementById('loginSuccessBtn').onclick = function() {
                const loginModal = bootstrap.Modal.getInstance(document.getElementById('loginModal'));
                loginModal.hide();
                isTongchengLoggedIn = true;
                document.getElementById('loginTongchengBtn').classList.add('btn-logged-in');
                document.getElementById('loginTongchengBtn').innerHTML = '<i class="bi bi-check-circle me-2"></i>已登录';
                validateForm();
            };
        });

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            let isValid = true;
            if (!form.checkValidity()) isValid = false;
            
            const checkIn = document.getElementById('checkIn').value;
            const checkOut = document.getElementById('checkOut').value;
            if (checkOut <= checkIn) {
                document.getElementById('checkOut').classList.add('is-invalid');
                document.getElementById('checkOut').nextElementSibling.style.display = 'block';
                isValid = false;
            }

            if (isValid) {
            document.getElementById('loading').style.display = 'block'; // 显示等待画面
            form.submit();
        }
        });
    </script>
</body>
</html>